<template>
  <div class="padding-across-10 main" v-loading="loading" element-loading-text="拼命加载中">
    <div style="padding-top: 5px;padding-bottom: 2px">
      <headerOpreate style="width: 200px;float: left" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
      <div style="float: right;padding-bottom: 3px">
        <span style="font-size: 10px;">{{$t('message.start')+':&nbsp;&nbsp;'}}</span>
        <el-date-picker :editable="false" :clearable="false" v-model="startTime" size="small" type="date" placeholder="选择起始日期" @change="changeStartTime"></el-date-picker>
        <span style="font-size: 10px">{{$t('message.end')+':&nbsp;&nbsp;'}}</span>
        <el-date-picker :editable="false" :clearable="false" size="small" type="date" v-model="endTime" placeholder="选择结束日期" @change="changeEndTime"></el-date-picker>
      </div>
      <!-- <div class="block" style="text-align:right;float: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next, jumper"
          :total="totalSize">
        </el-pagination>
      </div> -->
    </div>


    <el-table border style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
       <!-- <el-table-column type="index" align="center"></el-table-column> -->
       <el-table-column label="书名" align="center" prop="name"></el-table-column>
       <!-- <el-table-column label="条码" align="center" prop="bookcode"></el-table-column> -->
       <!-- <el-table-column label="标签" align="center" prop="booktag"></el-table-column> -->
       <el-table-column label="借书时间" align="center" prop="borrowtime"></el-table-column>
       <el-table-column label="到期时间" align="center" prop="shouldreturntime"></el-table-column>
       <el-table-column label="还书时间" align="center" prop="realreturntime"></el-table-column>
       <el-table-column label="是否归还" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isreturn" type="success">已归还</el-tag>
            <el-tag v-else type="warning">未归还</el-tag>
          </template>
        </el-table-column>
    </el-table>
    <div class="block" style="text-align:right;margin-bottom:60px;padding-top: 2px;padding-bottom: 5px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalSize">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'
  import {GloabFun,HttpServer}from '../../../assets/js/common.js'
  import headerOpreate from '../../../components/headerOpreate'
  let id = 1000;
  var date = new Date();
  export default {
    components:{
      headerOpreate
    },
    data() {
    	Date.prototype.format = function(format) {
        	var date = {
          		"M+": this.getMonth() + 1,
          		"d+": this.getDate()
        	};
        	if (/(y+)/i.test(format)) {
          		format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
        	}
        	for (var k in date) {
          		if (new RegExp("(" + k + ")").test(format)) {
            		format = format.replace(RegExp.$1, RegExp.$1.length == 1
              		? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
          		}
       		}
       		return format;
      	}
      return {
        loading:false,
      	startTime:new Date((date.getTime() - 3600 * 1000 * 24 * 30)).format('yyyy-MM-dd') + " 00:00:00",
        endTime:date.format('yyyy-MM-dd') + " 23:59:59",
        tableData:[],
        multipleSelection:[],
        currentPage:1,
        pageSize:10,
        totalSize:0,
      	opreateDatas:[
          {
            show: true,
            size:"small",
            type:'primary',
            icon:'el-icon-eleg-icon_refresh el-icon--left',
            name:this.$t("message.refresh"),
            action:'reloadDatas'
          }
        ],
      }
    },
    props:{
        templateObj:{
            type: Object,
            default:function(){
              return {};
            }
        }
    },
    methods:{
      executeAction(action){
        if(action){
          this[action]();
        }
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this.getDatas();
      },
      handleSizeChange(val){
        this.pageSize = val;
        this.getDatas();
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //起始时间
      changeStartTime(val){
      	this.startTime = val + ' 00:00:00';
      	this.getDatas();
      },
      //结束时间
      changeEndTime(val){
      	this.endTime = val + ' 23:59:59';
      	this.getDatas();
      },
      //刷新
      reloadDatas(){
        this.loading = true;
        var param = {
          code:GloabFun.getReaderCode(),
          begin:this.startTime,
          end:this.endTime,
          index:this.currentPage,
          pagesize:this.pageSize
        }
        HttpServer.httpPost2.call(this,'/Api/Reader/Info/Borrow',param,function(response) {
          },function(response){
            this.loading = false;
              if(response.data.code === 0){
                  this.tableData = response.data.BorrowRecord_;
                  this.totalSize = response.data.totalcount;
                  this.$message({
                    type:'success',
                    message:'数据刷新成功'
                  });
              }else {
                this.$message({
                  type:'error',
                  message:response.data.msg
                });
              }
        }); 
      },
      getDatas(){
        this.loading = true;
        var param = {
          code:GloabFun.getReaderCode(),
          begin:this.startTime,
          end:this.endTime,
          index:this.currentPage,
          pagesize:this.pageSize
        }
        HttpServer.httpPost2.call(this,'/Api/Reader/Info/Borrow',param,function(response) {
          },function(response){
            this.loading = false;
            // console.log('借阅记录',response);
            if(response.data.code === 0){
              this.tableData = response.data.BorrowRecord_;
              this.totalSize = response.data.totalcount;
            }else {
              this.$message.error(response.data.msg);
            }
        });      
      } 
    },
    created(){
      if(GloabFun.getReaderCode() != ''){
        this.getDatas();
      }else{
        this.$alert('读者尚未登录', this.$t('message.warning'), {
            confirmButtonText: this.$t('message.yes'),
            type: 'warning'
        });
      } 
    }
  }
</script>
<style scoped lang="less">
  .main {
    background-color: #fff;
    border-radius: 10px;
  }
  .name{
      color:#20a0ff;
   }
  .el-date-editor.el-input{
    width: 130px;
  }
  .edit-mission{
    padding-top: 50px;
    .el-dialog__header{
      background-color: #000;
    }
    .el-dialog__body{
       position: relative;
     }
    .clearfloat{
       height:100px;
      max-height:150px;
     }
  }
  ._detail{
     width:100%;
     display:block;
     margin-top:15px;
     padding-bottom:10px;
     border: 1px solid #E0E0E0;
     border-radius: 5px;
      .area-header{
          text-align: center;
          font-weight:bold;
          background-color: rgba(32, 159, 255, 0.2);
          border-color: rgba(32, 159, 255, 0.2);
          color: #20a0ff;
          padding: 5px;
          margin-bottom: 5px;
          border-radius: 5px;
        }
        .section:last-child{
        // margin-bottom:20px;
     }
  }
</style>